import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Colors, Image } from 'react-native-ui-lib';
import Icon from 'react-native-vector-icons/Ionicons';
import { useRouter } from 'expo-router';
import { AppStyles, TextStyles, AppColors } from '../../theme/uiLib.config';
import { StyleSheet, ScrollView, ImageBackground } from 'react-native';

const InsureranceList = () => {
  const router = useRouter();
  const [selectedMemberId, setSelectedMemberId] = useState('all'); // 默认选中“全家”

  // 模拟数据
  const insurances = [

    {
      id: '1',
      name: '万户健康保（壹级）2024',
      type: '健康险',
      status: '保障中',
      insuredPermother: '李磊',
      premium: '567.00',
      coverage: '50万',
      startDate: '2024-12-01',
      endDate: '2025-12-01',
      memberId: 'me',
    },
    {
      id: '2',
      name: '万户健康保（壹级）2025',
      type: '健康险',
      status: '保障中',
      insuredPermother: '李汉兰',
      premium: '888.00',
      coverage: '100万',
      startDate: '2024-12-01',
      endDate: '2025-12-01',
      memberId: 'mother',
    },

  ];

  const handleMemberSelect = (memberId: string) => {
    setSelectedMemberId(memberId);
  };

  const filteredInsurances = selectedMemberId === 'all' ? insurances : insurances.filter(insurance => insurance.memberId === selectedMemberId);

  const getAvatarSource = (memberId: string) => {
    switch (memberId) {
      case 'all':
        return require('../../../assets/images/avatar/family.png');
      case 'me':
        return require('../../../assets/images/avatar/me.png');
      case 'mother':
        return require('../../../assets/images/avatar/mother.png');
      default:
        return null;
    }
  };

  const getMemberName = (memberId: string) => {
    switch (memberId) {
      case 'all':
        return '全家';
      case 'me':
        return '*磊';
      case 'mother':
        return '*汉兰';
      default:
        return '';
    }
  };

  const getInsuranceCount = (memberId: string) => {
    if (memberId === 'all') {
      return insurances.length;
    }
    return insurances.filter(insurance => insurance.memberId === memberId).length;
  };

  return (
    <ImageBackground
      source={require('../../../assets/images/bg/1.png')}
      style={styles.backgroundImage}
      resizeMode="stretch"
    >
      <View style={[AppStyles.pagePadding, { flex: 1, backgroundColor: 'transparent' }]}>
        {/* Header */}
        <View style={styles.header}>
          <TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
            <Icon name="chevron-back" size={24} color={Colors.white} />
          </TouchableOpacity>
          <Text style={[TextStyles.h3, { color: Colors.white }]}>全家保单</Text>
        </View>

        <ScrollView style={{ marginTop: 20 }}>
          {/* 成员切换按钮 */}
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
          >
            <View style={{ flexDirection: 'row', justifyContent: 'flex-start' }}>
              {['all', 'me', 'mother'].map((memberId) => (
                <TouchableOpacity
                  key={memberId}
                  style={{
                    marginRight: 14,
                    paddingVertical: 8,
                    paddingHorizontal: 14,
                    backgroundColor: selectedMemberId === memberId ? AppColors.white : Colors.primary,
                    borderRadius: 24,
                    borderColor: selectedMemberId === memberId ? AppColors.white : AppColors.primary,
                    flexDirection: 'row',
                    alignItems: 'center',
                  }}
                  onPress={() => handleMemberSelect(memberId)}
                >
                  <Image
                    source={getAvatarSource(memberId)}
                    style={{ width: 28, height: 28, marginRight: 6, borderRadius: 15 }}
                  />
                  <Text style={[TextStyles.small, { color: selectedMemberId === memberId ? Colors.blueplus : AppColors.white, fontWeight: selectedMemberId === memberId ? 'bold' : 'normal' }]}>
                    {`${getMemberName(memberId)}·${getInsuranceCount(memberId)}份`}
                  </Text>
                </TouchableOpacity>
              ))}
            </View>
          </ScrollView>


          {/* 保单列表 */}
          {filteredInsurances.map((insurance, index) => (
            <View key={insurance.id} style={[
              AppStyles.cardStyle,
              {
                padding: 16,
                marginTop: 10,
                backgroundColor: 'white',
                borderRadius: 8,
                elevation: 4,
              }
            ]}>
              <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 12 }}>
                <Text style={[TextStyles.h3, { color: AppColors.tertiary }]}>{insurance.name}</Text>
                <Text style={[TextStyles.small, { color: AppColors.primary }]}>{insurance.status}</Text>
              </View>

              <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 }}>
                <Text style={[TextStyles.small, { color: AppColors.secondary }]}>被保险人：{insurance.insuredPermother}</Text>
                <Text style={[TextStyles.small, { color: AppColors.secondary }]}>保费：{insurance.premium}</Text>
              </View>

              <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 }}>
                <Text style={[TextStyles.small, { color: AppColors.secondary }]}>保障额度：{insurance.coverage}</Text>
                <Text style={[TextStyles.small, { color: AppColors.secondary }]}>类型：{insurance.type}</Text>
              </View>

              <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                <Text style={[TextStyles.small, { color: AppColors.secondary }]}>
                  保障期限：{insurance.startDate} 至 {insurance.endDate}
                </Text>
              </View>
            </View>
          ))}
        </ScrollView>
      </View>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 40,
    justifyContent: 'center',
  },
  backButton: {
    position: 'absolute',
    left: 0,
  },
});

export default InsureranceList;
